<!-- 统计检测 -->
<template>
	<view class="box">
		<view class="table-box">
			<view :class="table == '0' ? 'on':''" @click="tableChange('0')">未通知</view>
			<view :class="table == '2' ? 'on':''" @click="tableChange('2')">已检测</view>
			<view :class="table == '1' ? 'on':''" @click="tableChange('1')">未检测</view>
		</view>

		<view class="search-box">
			<view class="search">
				<view class="time" @click="timeShow = true">
					<text :class="time ? 'on' : ''">{{time ? time : '请选择时间'}}</text>
					<u-icon name="calendar" color="#6f6f6f" size="48"></u-icon>
				</view>
				<!-- <view class="btn">查询</view> -->
			</view>
			<view class="people">
				<text>{{table == '0' ? '未通知：' : table == '2' ? '已检测：' : '未检测：'}}</text>
				<text class="num"
					:style="table == '0' ? 'color:#ff9900' : table == '2' ? 'color:#19be6b' : 'color:#fa3534'">{{total}}</text>
			</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="left">
					<view class="name">{{item.userName}}</view>
					<view class="room">{{item.roomName}}</view>
				</view>
				<view class="call">
					<u-icon name="phone" color="#2979ff" size="48" @click="callPhone(item.tel)"></u-icon>
				</view>
			</view>
		</view>

		<view class="download">
			<text>点击下载完整报表</text>
			<view class="btn" @click="downloadShow = true">下载</view>
		</view>

		<u-picker v-model="timeShow" mode="time" :default-time="defaultTime" @confirm="confirmTime"></u-picker>
		<u-modal v-model="modalShow" @confirm="modalConfirm" content='是否拨打电话？' show-cancel-button="true"></u-modal>
		<u-modal v-model="downloadShow" @confirm="downloadConfirm" content='是否下载完整报表？' show-cancel-button="true">
		</u-modal>
	</view>
</template>

<script>
	import {
		getQueryFloors,
		getQueryUnits
	} from "@/api/common"
	import {
		queryNucleicListReport,
		exportData,
	} from '@/api/nucleic.js';
	import {
		mapState
	} from 'vuex';
	import config from '@/conf/config.js'
	export default {
		data() {
			return {
				table: '0',

				// 选择时间
				timeShow: false,
				defaultTime: '',
				time: '',

				state: '0',

				// 拨打电话
				modalShow: false,
				phone: '',

				list: [],
				total: '0',

				downloadShow: false,
			}
		},
		onReady() {
			this.defaultTime = this.getNowTime()
		},
		onLoad() {
			this.queryNucleicListReport()
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			tableChange(num) {
				this.table = num
				this.state = num

				this.queryNucleicListReport()
			},
			/**
			 * 选择时间 确定
			 */
			confirmTime(e) {
				this.time = `${e.year}-${e.month}-${e.day}`
				this.queryNucleicListReport()
			},
			/**
			 * 当前时间 年-月-日
			 */
			getNowTime() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month < 10) {
					month = '0' + month;
				}
				if (day < 10) {
					day = '0' + day;
				}
				return `${year}-${month}-${day}`
			},
			/**
			 * 获取核酸检测人员列表
			 */
			queryNucleicListReport() {
				let parmas = {
					communityId: this.userCommunity.communityId,
					state: this.state,
					page: 1,
					row: 9999,
					startTime: this.time,
					endTime: this.time,
				}

				queryNucleicListReport(parmas).then((res) => {
					this.roomList = []
					if (res.code == 0) {
						let data = res.data
						if (res.data.length > 0) {
							this.list = res.data
							this.total = res.total
							this.hasData = true
						} else {
							this.hasData = false
							this.noDataText = '暂无人员信息。'
						}
					}
				}).catch(function(reason) {})
			},
			/**
			 * 拨打电话
			 */
			callPhone(link) {
				this.modalShow = true
				this.phone = link
			},
			modalConfirm() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			/**
			 * 下载
			 */
			downloadConfirm() {
				let url =
					`${config.baseUrl}/callComponent/exportNucleic/exportData?communityId=${this.userCommunity.communityId}&state=${this.state}&startTime=${this.time}&endTime=${this.time}`
				this.download(url)
			},
			download(_url) {
				uni.downloadFile({
					url: _url, //下载地址接口返回
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {}
										});
									}, 3000)
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.box {
		padding-top: 92rpx;
	}

	.table-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 16rpx 32rpx;
		box-shadow: $nl-box-shadow-grey;

		view {
			flex: 1;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: $nl-border-radius-main;
		}

		view:nth-child(2) {
			margin: 0 12rpx;
		}

		.on {
			color: #FFFFFF;
			background-color: $nl-color-main;
		}

		.on:active {
			background-color: $nl-color-main;
		}

		view:active {
			background-color: #f9f9f9;
		}
	}

	.search-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 24rpx 32rpx;

		.search {
			flex: 2;
			display: flex;
			align-items: center;

			.time {
				flex: 1;
				height: 72rpx;
				padding: 12rpx 24rpx;
				display: flex;
				align-items: center;
				background-color: #eaeaea;
				border-radius: $nl-border-radius-main;
				justify-content: space-between;
				color: #6f6f6f;
			}

			.on {
				color: #414141;
			}

			.btn {
				width: 160rpx;
				height: 72rpx;
				line-height: 72rpx;
				background-color: $nl-color-main;
				color: #FFFFFF;
				text-align: center;
				font-size: 28rpx;
				margin-left: 28rpx;
				border-radius: $nl-border-radius-main;
			}

			.btn:active {
				background-color: #248eff;
			}
		}

		.people {
			flex: 1;
			height: 72rpx;
			padding: 12rpx 24rpx;
			background-color: #FFFFFF;
			box-shadow: $nl-box-shadow-grey;
			font-size: 28rpx;
			margin-left: 28rpx;
			border-radius: $nl-border-radius-main;

			display: flex;
			align-items: center;

			text {
				height: 40rpx;
				line-height: 40rpx;
			}

			.num {
				font-size: 32rpx;
			}
		}
	}

	.list {
		padding: 0 32rpx 100rpx;

		.item {
			width: 100%;
			padding: 20rpx 24rpx;
			border-radius: $nl-border-radius-main;
			box-shadow: $nl-box-shadow-grey;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.left {
				margin-right: auto;

				.room {
					color: #737373;
					margin-top: 12rpx;
				}
			}

			.call {
				padding: 12rpx;
				border-radius: $nl-border-radius-main;
			}

			.call:active {
				background-color: #f9f9f9;
			}
		}
	}

	.download {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 18rpx 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		font-size: 28rpx;

		.btn {
			width: 140rpx;
			height: 64rpx;
			line-height: 64rpx;
			background-color: $nl-color-main;
			color: #FFFFFF;
			text-align: center;
			font-size: 28rpx;
			margin-left: auto;
			border-radius: $nl-border-radius-main;
		}

		.btn:active {
			background-color: #248eff;
		}
	}

	.password {
		display: flex;
		align-items: center;
		padding: 32rpx 100rpx;

		.lable {
			margin-right: 16rpx;
		}
	}
</style>
